<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Javascript Study</title>
</head>
<body>
    <input type="button" value="点击我，哈哈哈" id='bt1'>点击我，哈哈哈</input><br/>
    <input type="button" value="点击我，嘿嘿嘿" id='bt2'>点击我，嘿嘿嘿</input><br/>
   

    

    <script lang="text/javascript">

    function Person(name, age){
        console.log(this);
        this.name = name;
        this.age = age;
        console.log(this);
    }

    let p1 = new Person('Kyle', 18);
    let p2 = Person('k2', 11); // 当前内部对象 this是 window, 最终会设置window.name= name， window.age=age。 

    console.log(typeof p1);
    console.log(typeof p2);

    let obj = {};
    obj.a = 4;
    console.log(obj.a);

    let obj2 = {
        name: 'Kyle',
        fun:(name, age)=>{
            console.log(this.name + ' name='+name + " age="+age);
        }
    }
    let obj22 = {name: 'Real Kyle'}

    obj2.fun.apply(obj22, ['new', 18]);
    obj2.fun.call(obj22, 'new', 18)
    let newFun= obj2.fun.bind(obj22, 'new', 18);
    newFun();


    document.getElementById("bt1").onclick= function(){
        console.log(this);
    }

    let obj3 = {
        my:'obj3',
        fun(){
            console.log(this);
        }
    }
    obj3.fun();
    document.getElementById("bt2").onclick= obj3.fun;


    function ObjectConstruct(){
        Object.assign(this, {
            name:'kyle',
            age: 18,
            class:'high'
        })
    }
    let obj4 = new ObjectConstruct();
    console.log(obj4);

    let obj5 = {
        name:'kyle',

        fun: function(){
            function f(){
                console.log(this);
            }
            f();
        }
    }

    obj5.fun();



    </script>
</body>
</html>